<script setup>
import { ref, reactive, toRef, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router';
import {postTagInfo,postTagDeltags,postTagDeltag,postTagUpdtag } from '@/api'
const Route =useRoute();
const router = useRouter()
const ruleFormRef = ref()
//获取到值
console.log(Route.query.id)
const currentId = ref('')
onMounted(()=>{
     currentId.value = Route.query.id
    console.log("获取到的参数",currentId );
})
const formSize = ref('default')
const ruleForm = reactive({
  biaoqian: '',
  rule:[
    { id: '',  isShow: true, name: '' }
    ],
  deleteid:[]
});
// 修改拉取数据
const getInfo = () => {
  console.log(Route.query.id);
	if(Route.query.id != undefined){
		postTagInfo({
      id:Route.query.id
    }).then(res=>{
			ruleForm.biaoqian=res.data
      ruleForm.rule=res.data.info
			console.log("获取到的数值" ,ruleForm.rule);
			ruleForm.id=Route.query.id
		})
	}
}
getInfo()

// 添加子标签并保存

const onSubmit = async (formEl) => {
		if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
      console.log(ruleForm.rule,ruleForm.deleteid,ruleForm.biaoqian.name);
			postTagUpdtag({ 
        group_id:Route.query.id,
        group_name:ruleForm.biaoqian.name,
        add_tag:ruleForm.rule,
        removet_tag:ruleForm.deleteid
      }).then((res) => {
				console.log(res, '3333')
				ElMessage({ message: '提交成功', type: 'success' })
				router.push('customerGroupLabel')
			})
		} else {
			console.log('error submit!', fields)
			ElMessage({ message: '失败', type: 'error' })
		}
	})
}

 // 取消按钮
 const cancelSubmit =()=>{
    ElMessage({ message: '取消成功', type: 'success' })
          router.push('customerGroupLabel')
  }
// 添加子标签
const addInput = () => {
  ruleForm.rule.push({ name:''})
}
// 删除图标
const deleteInput = (index) => {
  console.log(index)
  console.log('测试数据',ruleForm.rule[index].id);
  if(ruleForm.rule[index].id){
    console.log('数据', ruleForm.id);
		ElMessage({ message: '删除成功', type: 'success' })
    ruleForm.deleteid.push(ruleForm.rule[index].id)
    ruleForm.rule.splice(index, 1)			
  }else{
    ruleForm.rule.splice(index, 1)
  } 
}

// 删除标签组
const deleteName = async (formEl) => {
		if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			postTagDeltags({ 
        group_id:Route.query.id,
        removet_tag:ruleForm.deleteid, 
      }).then((res) => {
				console.log(res, '3333')
				ElMessage({ message: '删除成功', type: 'success' })
        router.push('customerGroupLabel')
			})
		} else {
			console.log('error submit!', fields)
			ElMessage({ message: '删除失败', type: 'error' })
		}
	})
}



// 弹窗上移
const popUp = (index) => {
  if (index != 0) {
    ruleForm.rule[index] = ruleForm.rule.splice(index - 1, 1, ruleForm.rule[index])[0];
  } else {
    ruleForm.rule.push(ruleForm.rule.shift());
  }
}
// 弹窗下移
const popDown = (index) => {
  if (index != ruleForm.rule.length - 1) {
    ruleForm.rule[index] = ruleForm.rule.splice(index + 1, 1, ruleForm.rule[index])[0];
  } else {
    ruleForm.rule.unshift(ruleForm.rule.splice(index, 1)[0]);
  }
}
</script>
<template>
 <!-- 弹窗 -->
    <div class="allStyle">
          <div class="dialogTSY"> 修改标签组</div>
            <div class="formStyle">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :size="formSize">
            <el-form-item label="标签组名称:" label-width="150px" style="width: 500px">
              <el-input  v-model="ruleForm.biaoqian.name"  autocomplete="off" show-word-limit maxlength="15" />
            </el-form-item>
           <el-form-item label="标签名称:" label-width="150px">
              <div style="display: flex;" class="content-item" v-for="(item, index) in ruleForm.rule" :key="index">
                <span>
                  <el-input v-model="item.name" autocomplete="off" style="margin-bottom: 10px;width: 350px;"
                    show-word-limit maxlength="15" />
                </span>
                <!-- 后缀图标 -->
                <span  v-if="ruleForm.rule.length !== 1">
                  <el-icon style="margin-left: 10px" @click="deleteInput(index)">
                    <Remove />
                  </el-icon>
                  <span style="margin-left: 10px" @click="popUp(index)"><i class="iconfont">&#xe61c;</i></span>
                  <span style="margin-left: 10px" @click="popDown(index)"><i class="iconfont">&#xe61b;</i></span>
                </span>
              </div>
            </el-form-item>
            <el-form-item label-width="150px" @click="addInput">
              <p style="display: flex;margin-top: -10px;">
                <el-icon color="#1890ff">
                  <CirclePlus />
                </el-icon>
              <p style="color: #1890ff;margin-top: -9px;margin-left: 3px;">添加标签</p>
              </p>
            </el-form-item>
          </el-form>
          </div>
          <div class="addBottmStyle">
            <div style="color:#1890ff; font-size: 14px;" @click="deleteName(ruleFormRef)" >删除标签组</div>
            <div style="padding-right: 50px;">
                <el-button @click="cancelSubmit">取消</el-button>
             <el-button  @click="onSubmit(ruleFormRef)" type="primary">确定</el-button>
            </div>
             
          </div>
    </div>
</template>

<style scoped>
@import "../../../style/iconfont.css";

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.allStyle{
    background-color: #ffffff;
    margin: 20px;
}
.dialogTSY {
  height: 30px;
  line-height: 30px;
  margin: 20px;
  
}
.formStyle{
    width: 700px;
    margin-top: 20px;
}
.addBottmStyle{
    display: flex;
    justify-content: space-between;
     margin-left: 20px;
    margin-bottom: 20px;
     width: 700px;
}
</style>